.builder-mask {
  position: absolute;
  pointer-events: none; /* 鼠标事件穿透，不影响原元素交互 */
  transform: none;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  //background-color: #B9C2CC;
  //border: 1px dashed #B0B2F9;
  //box-shadow: 0 0 12px rgba(74, 144, 226, 0.2); /* 发光阴影 */
  background-color: rgba(74, 144, 226, 0.1); /* 半透明背景（可选） */
  //transition: opacity 0.3s ease; !* 过渡效果 *!
  opacity: 1; /* 初始隐藏 */
  z-index: 1999; /* 确保层级最高 */
  transition: all .05s ease-out;
}

/*
.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #e74c3c;
  cursor: nwse-resize;
  z-index: 10000;
  bottom: 0;
  right: 0;
  pointer-events: auto;
}*/

.builder-mask-drag-resize {
  //z-index: 9999;
  width: 100px;
  height: 100px;
  //box-shadow: 0 0 5px rgba(74, 144, 226, 0.3); /* 发光阴影 */
  background-color: rgba(74, 144, 226, 0.2); /* 半透明背景（可选） */
  pointer-events: none;
  border-color: #505299;
  z-index: 1999 !important;
  transition: all .05s ease-out;

  &:after {
    display: none !important;
  }

  &:hover {
    .builder-mask-drag,
    .handle-br {
      opacity: 1;
    }
  }
  .builder-mask-drag {
    position: absolute;
    left: -7px;
    top: -7px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    cursor: move;
    background: #EEE;
    font-size: 13px;
    pointer-events: auto;
    opacity: 0.8;
    border: 1px solid var(--j-text-color-secondary);
  }
  .handle-br,
  .handle-bm,
  .handle-mr {
    display: block !important;
    pointer-events: auto;
    opacity: .5;

    &:after {
      content: ' ';
      position: absolute;
      width: 0px;
      height: 0px;
      border-width: 4px;
      border-color: transparent #505299 #505299 transparent;
    }
  }

  .handle-br {
    right: 0px;
    bottom: 0px;
    width: 9px;
    height: 9px;
    border: none;
    background: none;
  }
}
